<template>
    <div class="cardContent">
        <a-table :dataSource="taskList"
                 :columns="columns"
                 :pagination="false"
                 size="small"
                 bordered>
            <template #bodyCell="{text,record,index,column}">
                <template v-if="column.key == 'createTime'">
                    {{formatDate(text)}}
                </template>
                <a-space v-if="column.key == 'action'">
                    <a-button type="primary" @click="showDrawer(record)">办理任务</a-button>
                    <a-popconfirm
                            title="删除数据无法恢复，请确认是否删除？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button type="danger">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
    </div>
    <!--    处理请假单-->
    <a-drawer
            title="请假申请单"
            :width="1000"
            :visible="leaveVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="leaveVisible = false"
    >
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row>
                <a-form-item label="请假申请人">
                    <a-input v-model:value="drawerData.billInfo.username" :disabled="true"/>
                </a-form-item>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="disabled"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="请假天数" name="days">
                        <a-input v-model:value="drawerData.billInfo.days" :disabled="true"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag v-if="drawerData.billInfo.status == 2" color="warning">
                            <template #icon>
                                <exclamation-circle-outlined/>
                            </template>
                            被驳回
                        </a-tag>
                        <a-tag v-else color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="请假起止时间">
                        <a-config-provider :locale="locale">
                            <a-range-picker
                                    v-model:value="startAndEndTime"
                                    :show-time="{ format: 'HH:mm' }"
                                    style="width: 400px"
                                    :disabled-date="disabledDate"
                                    :disabled="disabled"
                                    @change="rangeTimeChange"
                                    format="YYYY-MM-DD HH:mm:ss"
                            />
                        </a-config-provider>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="请假原因" name="remark">
                        <a-textarea v-model:value="drawerData.billInfo.remark"
                                    :disabled="disabled" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="批注"
                                 v-bind="validateInfos.comment"
                                 name="comment">
                        <a-textarea v-model:value="drawerData.comment" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-space>
                        <a-button v-for="(item,index) in drawerData.sequenceList"
                                  :key="index" type="primary"
                                  @click="submitOk(item)">
                            {{item}}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>

    </a-drawer>
    <!--    处理出库单-->
    <a-drawer
            title="出库申请单"
            :width="1000"
            :visible="outboundVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="outboundVisible = false"
    >
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-form-item label="申请人">
                        <a-input v-model:value="drawerData.billInfo.username" disabled/>
                    </a-form-item>
                </a-col>
                <a-col :span="16">
                    <a-form-item label="关联销售单">
                        <a-input v-model:value="drawerData.billInfo.salesOrderTitle" disabled/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="disabled"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="产品名称">
                        <a-input v-model:value="drawerData.billInfo.productName" disabled/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="6">
                    <a-form-item label="出库数量" name="status">
                        <a-input-number disabled addon-after="件"
                                        v-model:value="drawerData.billInfo.quantity"></a-input-number>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag v-if="drawerData.billInfo.status == 2" color="warning">
                            <template #icon>
                                <exclamation-circle-outlined/>
                            </template>
                            被驳回
                        </a-tag>
                        <a-tag v-else color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="描述" name="remark">
                        <a-textarea :disabled="disabled" v-model:value="drawerData.billInfo.remark" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="批注"
                                 v-bind="validateInfos.comment"
                                 name="comment">
                        <a-textarea v-model:value="drawerData.comment" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-space>
                        <a-button v-for="(item,index) in drawerData.sequenceList"
                                  :key="index" type="primary"
                                  @click="submitOk(item)">
                            {{item}}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>

    </a-drawer>
    <!--    处理报销单-->
    <a-drawer
            title="报销申请单"
            :width="1000"
            :visible="reimbursementVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="reimbursementVisible = false"
    >
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row>
                <a-form-item label="报销申请人">
                    <a-input v-model:value="drawerData.billInfo.username" :disabled="true"/>
                </a-form-item>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="disabled"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="报销金额" name="amount">
                        <a-input v-model:value="drawerData.billInfo.amount" :disabled="disabled"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag v-if="drawerData.billInfo.status == 2" color="warning">
                            <template #icon>
                                <exclamation-circle-outlined/>
                            </template>
                            被驳回
                        </a-tag>
                        <a-tag v-else color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="证明材料">
                        <upload :upload-disabled="disabled" v-model:imgUrl="drawerData.billInfo.proof"
                                :upload-url="'http://47.113.223.105:8088/upload'"></upload>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="描述" name="remark">
                        <a-textarea v-model:value="drawerData.billInfo.remark"
                                    :disabled="disabled" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="批注"
                                 v-bind="validateInfos.comment"
                                 name="comment">
                        <a-textarea v-model:value="drawerData.comment" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-space>
                        <a-button v-for="(item,index) in drawerData.sequenceList"
                                  :key="index" type="primary"
                                  @click="submitOk(item)">
                            {{item}}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>

    </a-drawer>
    <!--    处理研发方案-->
    <a-drawer
            title="研发方案"
            :width="1000"
            :visible="conceptualVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="conceptualVisible = false"
    >
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row>
                <a-form-item label="申请人">
                    <a-input v-model:value="drawerData.billInfo.username" :disabled="true"/>
                </a-form-item>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="disabled"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="研发资金">
                        <a-input v-model:value="drawerData.billInfo.rdFunding" :disabled="task.taskName != '总经理审批'"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag v-if="drawerData.billInfo.status == 2" color="warning">
                            <template #icon>
                                <exclamation-circle-outlined/>
                            </template>
                            被驳回
                        </a-tag>
                        <a-tag v-else color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="设计理念" name="remark">
                        <a-textarea v-model:value="drawerData.billInfo.designConcept"
                                    :disabled="disabled" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="批注"
                                 v-bind="validateInfos.comment"
                                 name="comment">
                        <a-textarea v-model:value="drawerData.comment" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-space>
                        <a-button v-for="(item,index) in drawerData.sequenceList"
                                  :key="index" type="primary"
                                  @click="submitOk(item)">
                            {{item}}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>

    </a-drawer>
    <!--    处理离职流程-->
    <a-drawer
            title="离职申请"
            :width="1000"
            :visible="resignVisible"
            :body-style="{ paddingBottom: '40px' }"
            :footer-style="{ textAlign: 'right' }"
            @close="resignVisible = false"
    >
        <a-form :model="drawerData.billInfo" layout="vertical">
            <a-row>
                <a-form-item label="申请人">
                    <a-input v-model:value="drawerData.billInfo.username" :disabled="true"/>
                </a-form-item>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="标题" name="title">
                        <a-input v-model:value="drawerData.billInfo.title" :disabled="disabled"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="状态" name="status">
                        <a-tag v-if="drawerData.billInfo.status == 2" color="warning">
                            <template #icon>
                                <exclamation-circle-outlined/>
                            </template>
                            被驳回
                        </a-tag>
                        <a-tag v-else color="processing">
                            <template #icon>
                                <sync-outlined :spin="true"/>
                            </template>
                            审批中
                        </a-tag>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="离职时间">
                        <a-date-picker :disabled="disabled"
                                       :disabled-date="disabledDate"
                                       v-model:value="drawerData.billInfo.resignDate"
                                       placeholder="请选择离职时间"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="离职原因">
                        <a-textarea v-model:value="drawerData.billInfo.remark"
                                    :disabled="disabled" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item label="批注"
                                 v-bind="validateInfos.comment"
                                 name="comment">
                        <a-textarea v-model:value="drawerData.comment" :rows="3"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-space>
                        <a-button v-for="(item,index) in drawerData.sequenceList"
                                  :key="index" type="primary"
                                  @click="submitOk(item)">
                            {{item}}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
        </a-form>
        <a-list
                item-layout="horizontal"
                size="large"
                style="margin-top: 10px"
                bordered
                :data-source="drawerData.comments"
        >
            <template #header>
                <div>批注列表</div>
            </template>
            <template #renderItem="{ item, index }">
                <a-list-item>
                    <a-list-item-meta>
                        <template #title>
                            {{ item.username }}({{item.roleName}})
                        </template>
                        <template #avatar>
                            <a-avatar :src="item.pic"/>
                        </template>
                        <template #description>{{item.fullMessage}}</template>
                    </a-list-item-meta>
                    <div>
                        {{formatDate(item.time)}}
                    </div>
                </a-list-item>
            </template>
        </a-list>

    </a-drawer>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message, Form} from 'ant-design-vue'
    import {SyncOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue'
    import store from '@/store'
    import dayjs from 'dayjs'
    import upload from '@/components/upload'
    import {isEmpty} from "@/utils/Tool";

    export default {
        name: "ToDoTasks",
        components: {
            SyncOutlined,
            ExclamationCircleOutlined,
            upload
        },
        setup() {
            const columns = [
                {
                    title: '任务ID',
                    dataIndex: 'taskId',
                    key: 'taskId',
                },
                {
                    title: '申请名称',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '申请人',
                    dataIndex: 'applyUsername',
                    key: 'applyUsername',
                },
                {
                    title: '申请时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                },
                {
                    title: '操作',
                    key: 'action',
                }
            ]
            const commentColumns = [
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                },
                {
                    title: '批注人',
                    dataIndex: 'userId',
                    key: 'user',
                },
                {
                    title: '批注信息',
                    dataIndex: 'fullMessage',
                    key: 'fullMessage',
                },
            ]

            const useForm = Form.useForm
            const loginUser = ref({})
            const task = ref({})
            const taskList = ref()
            const userList = ref()
            const drawerData = ref({
                comment: ''
            })
            const {validate, validateInfos,resetFields} = useForm(drawerData, {
                comment: [{required: true, message: '请输入批注信息', trigger: ['change']}]
            })
            const leaveVisible = ref(false)
            const reimbursementVisible = ref(false)
            const conceptualVisible = ref(false)
            const outboundVisible = ref(false)
            const resignVisible = ref(false)
            const disabled = ref(true)

            const disabledDate = current => {
                return current < dayjs().subtract(1, 'days').endOf('day');
            };
            const startAndEndTime = ref([])
            const rangeTimeChange = (dates, dateStrings) => {
                // console.log("dates",dates)
                // console.log("dateStrings",dateStrings)
                let minutes = dates[1].diff(dates[0], 'minutes')
                drawerData.value.billInfo.days = Number(minutes / 60 / 24).toFixed(1)
                drawerData.value.billInfo.leaveStart = dates[0]
                drawerData.value.billInfo.leaveEnd = dates[1]
            }

            const load = () => {
                axios.get('process/queryTaskByUserId/' + loginUser.value.id).then(rs => {
                    console.log("查找待办事务结果：", rs)
                    taskList.value = rs.data
                })
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/task/delete/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const showDrawer = obj => {
                task.value = JSON.parse(JSON.stringify(obj))
                axios.get('process/viewTaskForm/' + obj.taskId).then(rs => {
                    console.log("获取task信息结果：", rs)
                    drawerData.value = rs.data
                    drawerData.value.comment = ''
                    if (drawerData.value.billInfo.status == 2 || drawerData.value.billInfo.userId == loginUser.value.id) {
                        disabled.value = false
                    }
                    if (drawerData.value.billType == 'leave') {
                        startAndEndTime.value.push(dayjs(drawerData.value.billInfo.leaveStart))
                        startAndEndTime.value.push(dayjs(drawerData.value.billInfo.leaveEnd))
                        console.log("时间范围", startAndEndTime.value)
                        leaveVisible.value = true
                    } else if (drawerData.value.billType == 'reimbursement') {
                        reimbursementVisible.value = true
                    } else if (drawerData.value.billType == 'developed') {
                        conceptualVisible.value = true
                    } else if (drawerData.value.billType == 'outbound') {
                        outboundVisible.value = true
                    } else if (drawerData.value.billType == 'resign') {
                        drawerData.value.billInfo.resignDate = dayjs(drawerData.value.billInfo.resignDate)
                        resignVisible.value = true
                    }
                })
            }
            const submitOk = (buttonValue) => {
                validate().then(() => {
                    let completeData = {
                        sequence: buttonValue,
                        userId: loginUser.value.id,
                        taskId: task.value.taskId,
                        comment: drawerData.value.comment
                    }
                    let url = ''
                    if (drawerData.value.billType == 'leave') {
                        url = 'leaveProcess/complete'
                        if (drawerData.value.billInfo.status == 2 || drawerData.value.billInfo.userId == loginUser.value.id) {
                            completeData.leaveBill = drawerData.value.billInfo
                        }
                    } else if (drawerData.value.billType == 'outbound') {
                        url = 'outboundProcess/complete'
                        if (drawerData.value.billInfo.status == 2 || drawerData.value.billInfo.userId == loginUser.value.id) {
                            completeData.outboundBill = drawerData.value.billInfo
                        }
                    } else if (drawerData.value.billType == 'reimbursement') {
                        url = 'reimbursementProcess/complete'
                        if (drawerData.value.billInfo.status == 2 || drawerData.value.billInfo.userId == loginUser.value.id) {
                            completeData.reimbursementBill = drawerData.value.billInfo
                        }
                    } else if (drawerData.value.billType == 'developed') {
                        if (task.value.taskName == '总经理审批' && buttonValue == '通过') {
                            if (isEmpty(drawerData.value.billInfo.rdFunding)) {
                                console.log("研发资金为null")
                                message.error("请设置研发资金")
                                return
                            }
                        }
                        url = 'conceptualProcess/complete'
                        if (drawerData.value.billInfo.status == 2
                            || (drawerData.value.billInfo.userId == loginUser.value.id && drawerData.value.comments.length == 0)
                            || (task.value.taskName == '总经理审批' && buttonValue == '通过')) {
                            completeData.conceptualProduct = drawerData.value.billInfo
                        }
                    } else if (drawerData.value.billType == 'resign') {
                        url = 'resignProcess/complete'
                        if (drawerData.value.billInfo.status == 2 || drawerData.value.billInfo.userId == loginUser.value.id) {
                            completeData.resignBill = drawerData.value.billInfo
                        }
                    }
                    axios.post(url, completeData).then(rs => {
                        if (rs.code == 200) {
                            message.success("审批成功")
                            leaveVisible.value = false
                            reimbursementVisible.value = false
                            conceptualVisible.value = false
                            outboundVisible.value = false
                            resignVisible.value = false
                            load()
                        }
                    })
                }).catch(() => {
                    console.log("校验不通过")
                })
            }

            const formatDate = (time) => {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            }

            onMounted(() => {
                loginUser.value = store.state.user
                axios.get('user/queryAll').then(rs => {
                    userList.value = rs.data
                })
                load()
            })
            return {
                columns,
                load,
                okDelete,
                task,
                taskList,
                showDrawer,
                leaveVisible,
                reimbursementVisible,
                submitOk,
                drawerData,
                commentColumns,
                validateInfos,
                loginUser,
                formatDate,
                disabled,
                disabledDate,
                startAndEndTime,
                rangeTimeChange,
                conceptualVisible,
                outboundVisible,
                resignVisible
            }
        }
    }
</script>

<style scoped>
    .cardContent {
        background: #fff;
        margin: 10px 10px 0 10px;
        padding: 15px;
    }
</style>